QrScanner.tsx ➔ QrScanner - Code Metrics - FalkenDev/SparkRentals-Mobile-App - Measure and Improve Code Quality continuously with Scrutinizer

QrScanner.tsx ➔ QrScanner C
last analyzed 2023-01-12 17:40 UTC

↳ Parent: components/modals/QrScanner.tsx

Complexity

Conditions

Size

Total Lines	96
Code Lines	77

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	77
dl	0
loc	96
rs	6.3526
c	0
b	0
f	0
cc	7

How to fix Long Method

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Button, Modal, Pressable, TextInput } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import Icon from 'react-native-vector-icons/Octicons';
import scooterModel from '../../models/scooter';
import { showMessage, hideMessage } from "react-native-flash-message";

export default function QrScanner({navigation, cameraVisible, setCameraVisible, scooter, setModalVisible, currentCity, setCurrentScooter}) {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  const [code, setCode] = useState(null);

    useEffect(() => {
      const getBarCodeScannerPermissions = async () => {
        const { status } = await BarCodeScanner.requestPermissionsAsync();
        setHasPermission(status === 'granted');
      };

      getBarCodeScannerPermissions();
    }, []);

    async function handleBarCodeScanned({ type, data }) {
      setScanned(true);

      await startScooter(data);
    };

    if (hasPermission === null) {
      return <Text>Requesting for camera permission</Text>;
    }
    if (hasPermission === false) {
      return <Text>No access to camera</Text>;
    }

    async function startScooter(scooter): Promise<void> {
      // Check if QR code is a valid scooter
      const result = await scooterModel.checkIfValidScooter(scooter, currentCity);

      
      if (result) {
        showMessage({
          message: 'Scooter scanned!',
          type: 'success',
          position: 'bottom'

        });

        setCameraVisible(!cameraVisible);
        setModalVisible(true);
        setCurrentScooter(result);
      } else {
        showMessage({
          message: 'Not a scooter!',
          type: 'danger',
          position: 'center'
        })
      }

      
    }

  return (
    <Modal
        animationType="slide"
        transparent={true}
        visible={cameraVisible}
        onRequestClose={() => {
        setCameraVisible(!cameraVisible);
        }}
    >
        <View style={[styles.container, styles.shadowProp]}>
            <Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => setCameraVisible(!cameraVisible)}>
                <Icon 
                    name='x' 
                    size={25} 
                    color='black'
                />
            </Pressable>
            
            <Text style={styles.title}>Scan the QR-code</Text>
            <TextInput
            placeholder="or enter code manually"
            style={styles.input}
            onChangeText={(content: string) => {
                setCode(content)
            }}
            onSubmitEditing={() => startScooter(code)}
            />
        <BarCodeScanner
            onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
            style={styles.viewFinder}
        />

        <Pressable style={[styles.cameraButton, styles.shadowProp]} onPress={() => setScanned(false)} >
            <Icon 
                name='screen-full' 
                size={24} 
                color='black'
            />
        </Pressable>
        </View>
    </Modal>

  );
}

const styles = StyleSheet.create({
    container: {
      width: '100%',
      alignItems: 'center',
      backgroundColor: 'white',
      height: '80%',
      top: '20%',
      borderTopRightRadius: 25,
      borderTopLeftRadius: 25

    },

    viewFinder: {
        flex: 1,
        width: '70%',
    },


    shadowProp: {
        elevation: 5,
        shadowColor: 'black'
    },
    
    backButton: {
        position: 'absolute',
        width: 40,
        height: 40, 
        left: 20,
        backgroundColor: 'white',
        top: 20,
        borderRadius: 25,
        borderWidth: 1,
        borderColor: 'gray',
        alignItems: 'center',
        justifyContent: 'center'
    },

    cameraButton: {
        width: 60,
        height: 60, 
        backgroundColor: 'white',
        bottom: 50,
        borderRadius: 50,
        borderWidth: 1,
        borderColor: 'gray',
        alignItems: 'center',
        justifyContent: 'center'
    },

    title: {
        position: 'absolute',
        fontWeight: 'bold',
        fontSize: 20,
        marginTop: 30
    },

    subTitle: {
      position: 'absolute',
      fontSize: 12,
      marginTop: 55,
      color: 'gray'
  },

    input: {
      width: '60%',
      marginBottom: 30,
      borderRadius: 10,
      height: 50,
      padding: 10,
      borderBottomWidth: 2,
      borderColor: 'gray',
      marginTop: 60,
      textAlign: 'center'
    }
})

1			import React, { useState, useEffect } from 'react';
2			import { Text, View, StyleSheet, Button, Modal, Pressable, TextInput } from 'react-native';
3			import { BarCodeScanner } from 'expo-barcode-scanner';
4			import Icon from 'react-native-vector-icons/Octicons';
5			import scooterModel from '../../models/scooter';
6			import { showMessage, hideMessage } from "react-native-flash-message";
7
8			export default function QrScanner({navigation, cameraVisible, setCameraVisible, scooter, setModalVisible, currentCity, setCurrentScooter}) {
9			const [hasPermission, setHasPermission] = useState(null);
10			const [scanned, setScanned] = useState(false);
11			const [code, setCode] = useState(null);
12
13			useEffect(() => {
14			const getBarCodeScannerPermissions = async () => {
15			const { status } = await BarCodeScanner.requestPermissionsAsync();
16			setHasPermission(status === 'granted');
17			};
18
19			getBarCodeScannerPermissions();
20			}, []);
21
22			async function handleBarCodeScanned({ type, data }) {
23			setScanned(true);
24
25			await startScooter(data);
26			};
27
28			if (hasPermission === null) {
29			return <Text>Requesting for camera permission</Text>;
30			}
31			if (hasPermission === false) {
32			return <Text>No access to camera</Text>;
33			}
34
35			async function startScooter(scooter): Promise<void> {
36			// Check if QR code is a valid scooter
37			const result = await scooterModel.checkIfValidScooter(scooter, currentCity);
38
39
40			if (result) {
41			showMessage({
42			message: 'Scooter scanned!',
43			type: 'success',
44			position: 'bottom'
45
46			});
47
48			setCameraVisible(!cameraVisible);
49			setModalVisible(true);
50			setCurrentScooter(result);
51			} else {
52			showMessage({
53			message: 'Not a scooter!',
54			type: 'danger',
55			position: 'center'
56			})
57			}
58
59
60			}
61
62			return (
63			<Modal
64			animationType="slide"
65			transparent={true}
66			visible={cameraVisible}
67			onRequestClose={() => {
68			setCameraVisible(!cameraVisible);
69			}}
70			>
71			<View style={[styles.container, styles.shadowProp]}>
72			<Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => setCameraVisible(!cameraVisible)}>
73			<Icon
74			name='x'
75			size={25}
76			color='black'
77			/>
78			</Pressable>
79
80			<Text style={styles.title}>Scan the QR-code</Text>
81			<TextInput
82			placeholder="or enter code manually"
83			style={styles.input}
84			onChangeText={(content: string) => {
85			setCode(content)
86			}}
87			onSubmitEditing={() => startScooter(code)}
88			/>
89			<BarCodeScanner
90			onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
91			style={styles.viewFinder}
92			/>
93
94			<Pressable style={[styles.cameraButton, styles.shadowProp]} onPress={() => setScanned(false)} >
95			<Icon
96			name='screen-full'
97			size={24}
98			color='black'
99			/>
100			</Pressable>
101			</View>
102			</Modal>
103
104			);
105			}
106
107			const styles = StyleSheet.create({
108			container: {
109			width: '100%',
110			alignItems: 'center',
111			backgroundColor: 'white',
112			height: '80%',
113			top: '20%',
114			borderTopRightRadius: 25,
115			borderTopLeftRadius: 25
116
117			},
118
119			viewFinder: {
120			flex: 1,
121			width: '70%',
122			},
123
124
125			shadowProp: {
126			elevation: 5,
127			shadowColor: 'black'
128			},
129
130			backButton: {
131			position: 'absolute',
132			width: 40,
133			height: 40,
134			left: 20,
135			backgroundColor: 'white',
136			top: 20,
137			borderRadius: 25,
138			borderWidth: 1,
139			borderColor: 'gray',
140			alignItems: 'center',
141			justifyContent: 'center'
142			},
143
144			cameraButton: {
145			width: 60,
146			height: 60,
147			backgroundColor: 'white',
148			bottom: 50,
149			borderRadius: 50,
150			borderWidth: 1,
151			borderColor: 'gray',
152			alignItems: 'center',
153			justifyContent: 'center'
154			},
155
156			title: {
157			position: 'absolute',
158			fontWeight: 'bold',
159			fontSize: 20,
160			marginTop: 30
161			},
162
163			subTitle: {
164			position: 'absolute',
165			fontSize: 12,
166			marginTop: 55,
167			color: 'gray'
168			},
169
170			input: {
171			width: '60%',
172			marginBottom: 30,
173			borderRadius: 10,
174			height: 50,
175			padding: 10,
176			borderBottomWidth: 2,
177			borderColor: 'gray',
178			marginTop: 60,
179			textAlign: 'center'
180			}
181			})

FalkenDev / SparkRentals-Mobile-App

QrScanner.tsx ➔ QrScanner C last analyzed 2023-01-12 17:40 UTC

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like

QrScanner.tsx ➔ QrScanner C
last analyzed 2023-01-12 17:40 UTC